<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: #ab84ed;
            width: 100px;
            height: 100px;
            position: relative;
            /*animation-name:move1;
            animation-duration: 2s;
            animation-iteration-count: 3;/*执行3次，infinit 无线循环*/
           /* animation-delay: 1s;
            animation-timing-function: linear/*匀速*/;/*低速开始再加速ease*/
            /*stepd定格动画*/
            /*animation-fill-mode: reverse;/*反向播放*//*forwards保留最后一帧的位置*/
            animation: move1 2s linear 0.5s infinite;
            animation-play-state: paused;/*播放停止*/
        }
            @keyframes move1 {
                0%{
                    top:0px;
                    left:25px;
                    background-color: #fff;

                }
                50%{
                    top:0px;
                    left:75px;
                    background-color:yellow

                }
                70%{
                    top:0px;
                    left:120px;
                    background-color: #a40f0f;
                    
                }
                100%{
                    top:0px;
                    left:150px;
                    background-color: #5a27d1;

                }
            }  
        
    </style>
</head>
<body>
    <div>

    </div>
    
</body>
</html>